<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .sidebar {
            width: 250px;
            background-color: #262626;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            overflow-x: hidden;
            padding-top: 20px;
        }
        .sidebar h2 {
            color: #fff;
            text-align: center;
        }
        .sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .sidebar > ul > li {
            padding: 10px;
            text-align: center;
        }
        .sidebar > ul > li > ul {
            margin-left: 20px;
            display: none;
        }
        .sidebar a {
            color: #fff;
            text-decoration: none;
            display: block;
            transition: 0.3s;
        }
        .sidebar a:hover {
            background-color: #555;
        }
        .sub-menu.show {
            display: block;
        }
        .content {
            margin-left: 270px;
            padding: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<div class="sidebar">
    <h2>系统菜单</h2>
    <ul>
        <li>
            <a href="#" class="category" data-category="category1">采集系统质量管理</a>
            <ul id="category1" class="sub-menu">
                <li><a href="#" class="data-set" data-set="data1">服务器日志统计报告</a></li>
                <li><a href="#" class="data-set" data-set="data2">hdfs日志统计报告</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="category" data-category="category2">ODS层表质量管理</a>
            <ul id="category2" class="sub-menu">
                <li><a href="#" class="data-set" data-set="data3">ods_user_action_log表</a></li>
                <li><a href="#" class="data-set" data-set="data4">ods_ad_request_log表</a></li>
                <li><a href="#" class="data-set" data-set="data4">ods_search_request_log表</a></li>
            </ul>
        </li>
        <!-- Add more categories and data sets as needed -->
    </ul>
</div>

<div class="content">
    <h2>服务器日志行数报告</h2>
    <div id="dataTable"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $(".category").click(function() {
            var categoryId = $(this).data("category");
            $("#" + categoryId).toggleClass("show");
        });

        $(".data-set").click(function() {
            var dataSet = $(this).data("set");
            loadData(dataSet);
        });

        function loadData(dataSet) {
            $.ajax({
                url: "/api/get_collection_dq",
                type: "GET",
                data: { dataSet: dataSet },
                dataType: "json",
                success: function(data) {
                    renderTable(data);
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching data:", error);
                }
            });
        }

        function renderTable(data) {
            var tableHtml = '<table>';
            tableHtml += '<tr><th>服务器名称</th><th>日期</th><th>文件数</th><th>行数</th></tr>';
            $.each(data, function(index, item) {
                tableHtml += '<tr>';
                tableHtml += '<td>' + item.logServerHostname + '</td>';
                tableHtml += '<td>' + item.statisticDate + '</td>';
                tableHtml += '<td>' + item.logFileCount + '</td>';
                tableHtml += '<td>' + item.logLineAmount + '</td>';
                tableHtml += '</tr>';
            });
            tableHtml += '</table>';
            $('#dataTable').html(tableHtml);
        }

        // Load initial data when the page loads (optional)
        loadData('data1');
    });
</script>

</body>
</html>
